<script lang="ts" setup>
import { updateParams } from "@/components/Overlay/hooks/useUtils";
import useFetchDateList, {
  useFetchDateListRefs
} from "../hooks/useFetchDateList";
const { fetchDateList1 } = useFetchDateList();
const { dateList, curHistDate, dateParams } = useFetchDateListRefs();
const route = useRoute();
const year = typeof route.query.year === "string" ? route.query.year : null;
onMounted(() => {
  if (year) {
    updateParams({ draw_year: year }, dateParams.value);
    fetchDateList1();
  }
});

const { dayjs } = useDayjs();
const emit = defineEmits(["update:curHistDate"]);
const show = ref(false);
function handleClick(
  it: { draw_date: string; draw_id: string | number },
  idx: number
) {
  show.value = false;
  curHistDate.value = it.draw_date;
  emit("update:curHistDate", it, idx);
}
function toggleShow() {
  show.value = !show.value;
}

defineExpose({
  toggleShow
});
// const dateList1 = computed(() =>
//   dateList.value.map(item => {
//     const newItem = { ...item, draw_day: dayjs(item.draw_date).format("DD") };
//     return newItem;
//   })
// );
</script>
<template>
  <div>
    <div v-if="show" class="absolute top-27 left-0 w-full">
      <ul
        class="h-180 overflow-y-scroll shadow-[0px_4px_8px_0px_rgba(58,90,112,0.22)]"
      >
        <li
          class="h-40 center bg-[#fff] b-b-1 b-b-solid b-b-[#e5e5e5] last-of-type:b-b-none"
          v-for="(it, idx) in dateList"
          :key="idx"
          @click.stop="handleClick(it, idx)"
        >
          <span>{{ it.draw_date }}</span>
        </li>
      </ul>
    </div>
    {{ curHistDate }}
  </div>
</template>
